<template>
<div class="publish-container">
    <van-nav-bar title="发布笔记" left-text="取消" right-text="发布" @click-left="onCancel" @click-right="onPublish" />

    <div class="publish-content">
        <div class="title-input">
            <van-field v-model="title" placeholder="请输入标题（必填）" maxlength="30" show-word-limit />
        </div>

        <div class="content-input">
            <van-field v-model="content" type="textarea" placeholder="分享你的生活点滴..." rows="5" autosize />
        </div>

        <div class="upload-section">
            <div class="section-title">添加图片</div>
            <van-uploader v-model="fileList" multiple :max-count="9" :after-read="afterRead" />
        </div>

        <div class="topic-section">
            <div class="section-title">添加话题</div>
            <div class="topic-list">
                <div v-for="(item, index) in selectedTopics" :key="index" class="topic-item">
                    <span class="topic-name"># {{ item.name }}</span>
                    <van-icon name="cross" @click="removeTopic(index)" />
                </div>
                <div class="topic-add" @click="showTopicPicker = true">
                    <van-icon name="plus" />
                    <span>添加话题</span>
                </div>
            </div>
        </div>

        <div class="location-section">
            <div class="section-title">添加位置</div>
            <div class="location-input" @click="showLocationPicker = true">
                <van-icon name="location-o" />
                <span v-if="location">{{ location }}</span>
                <span v-else class="placeholder">添加位置</span>
                <van-icon name="arrow" />
            </div>
        </div>

        <div class="publish-options">
            <div class="option-item">
                <span>同步到动态</span>
                <van-switch v-model="syncToMoments" size="24px" />
            </div>
            <div class="option-item">
                <span>设置为私密</span>
                <van-switch v-model="isPrivate" size="24px" />
            </div>
        </div>
    </div>

    <!-- 话题选择弹出层 -->
    <van-popup v-model="showTopicPicker" position="bottom" round>
        <div class="popup-header">
            <div class="popup-title">选择话题</div>
            <van-icon name="cross" @click="showTopicPicker = false" />
        </div>
        <div class="popup-content">
            <van-search v-model="topicSearchValue" placeholder="搜索话题" />
            <div class="topic-recommend">
                <div class="section-title">推荐话题</div>
                <div class="topic-grid">
                    <div v-for="(item, index) in recommendTopics" :key="index" class="topic-grid-item"
                        @click="addTopic(item)">
                        # {{ item.name }}
                    </div>
                </div>
            </div>
        </div>
    </van-popup>

    <!-- 位置选择弹出层 -->
    <van-popup v-model="showLocationPicker" position="bottom" round>
        <div class="popup-header">
            <div class="popup-title">选择位置</div>
            <van-icon name="cross" @click="showLocationPicker = false" />
        </div>
        <div class="popup-content">
            <van-search v-model="locationSearchValue" placeholder="搜索位置" />
            <div class="location-list">
                <div v-for="(item, index) in locationList" :key="index" class="location-item"
                    @click="selectLocation(item)">
                    <van-icon name="location-o" />
                    <div class="location-info">
                        <div class="location-name">{{ item.name }}</div>
                        <div class="location-address">{{ item.address }}</div>
                    </div>
                </div>
            </div>
        </div>
    </van-popup>
</div>
</template>

<script>
export default {
    name: 'PublishPage',

    data() {
        return {
            title: '',
            content: '',
            fileList: [],
            selectedTopics: [],
            location: '',
            syncToMoments: true,
            isPrivate: false,

            showTopicPicker: false,
            topicSearchValue: '',
            recommendTopics: [
                { id: 1, name: '美食探店' },
                { id: 2, name: '旅行日记' },
                { id: 3, name: '穿搭分享' },
                { id: 4, name: '读书笔记' },
                { id: 5, name: '健身打卡' },
                { id: 6, name: '摄影技巧' },
                { id: 7, name: '生活方式' },
                { id: 8, name: '手工DIY' }
            ],

            showLocationPicker: false,
            locationSearchValue: '',
            locationList: [
                { id: 1, name: '北京市朝阳区三里屯', address: '北京市朝阳区工人体育场北路' },
                { id: 2, name: '北京市海淀区中关村', address: '北京市海淀区中关村大街' },
                { id: 3, name: '北京市西城区西单', address: '北京市西城区西单北大街' },
                { id: 4, name: '北京市东城区王府井', address: '北京市东城区王府井大街' }
            ]
        }
    },

    methods: {
        onCancel() {
            this.$dialog.confirm({
                title: '提示',
                message: '是否放弃编辑？',
            }).then(() => {
                this.$router.back()
            }).catch(() => {
                // 取消操作
            })
        },

        onPublish() {
            if (!this.title) {
                return this.$toast('请输入标题')
            }

            if (this.fileList.length === 0) {
                return this.$toast('请至少上传一张图片')
            }

            // 模拟发布请求
            this.$toast.loading({
                message: '发布中...',
                forbidClick: true,
            })

            setTimeout(() => {
                this.$toast.success('发布成功')
                this.$router.replace('/home')
            }, 1500)
        },

        afterRead(file) {
            // 模拟上传进度
            file.status = 'uploading'
            file.message = '上传中...'

            setTimeout(() => {
                file.status = 'done'
                file.message = '上传成功'
            }, 1000)
        },

        addTopic(topic) {
            // 检查是否已添加
            const isExist = this.selectedTopics.some(item => item.id === topic.id)
            if (!isExist) {
                this.selectedTopics.push(topic)
            }
            this.showTopicPicker = false
        },

        removeTopic(index) {
            this.selectedTopics.splice(index, 1)
        },

        selectLocation(location) {
            this.location = location.name
            this.showLocationPicker = false
        }
    }
}
</script>

<style scoped>
.publish-container {
    min-height: 100vh;
    background-color: var(--color-white);
}

.publish-content {
    padding: 16px;
}

.title-input {
    margin-bottom: 16px;
}

.content-input {
    margin-bottom: 24px;
}

.section-title {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    margin-bottom: 12px;
}

.upload-section {
    margin-bottom: 24px;
}

.topic-section {
    margin-bottom: 24px;
}

.topic-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topic-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: var(--color-background);
    border-radius: 16px;
    font-size: var(--font-size-small);
}

.topic-name {
    margin-right: 4px;
}

.topic-add {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background-color: var(--color-background);
    border-radius: 16px;
    font-size: var(--font-size-small);
    color: var(--color-primary);
}

.topic-add .van-icon {
    margin-right: 4px;
}

.location-section {
    margin-bottom: 24px;
}

.location-input {
    display: flex;
    align-items: center;
    padding: 12px;
    background-color: var(--color-background);
    border-radius: var(--border-radius-small);
}

.location-input .van-icon {
    margin-right: 8px;
}

.location-input .van-icon:last-child {
    margin-left: auto;
    margin-right: 0;
    color: var(--color-text-secondary);
}

.placeholder {
    color: var(--color-text-secondary);
}

.publish-options {
    margin-top: 32px;
}

.option-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
}

.popup-title {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
}

.popup-content {
    padding: 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.topic-recommend {
    margin-top: 16px;
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.topic-grid-item {
    padding: 12px;
    background-color: var(--color-background);
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-small);
    text-align: center;
}

.location-list {
    margin-top: 16px;
}

.location-item {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.location-item .van-icon {
    margin-right: 12px;
    font-size: 20px;
    color: var(--color-primary);
}

.location-info {
    flex: 1;
}

.location-name {
    font-size: var(--font-size-normal);
    margin-bottom: 4px;
}

.location-address {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

/* 修改Vant样式 */
:deep(.van-nav-bar__title) {
    color: var(--color-text-primary);
}

:deep(.van-nav-bar__text) {
    color: var(--color-primary);
}

:deep(.van-nav-bar__arrow) {
    color: var(--color-text-primary);
}

:deep(.van-switch--on) {
    background-color: var(--color-primary);
}
</style>